<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="mycss.css" />
			<link rel="stylesheet" href="../css/layui.css" />
		<!-- <link rel="stylesheet" href="../css/style.css"> -->
	</head>

	<style>
		.Mfile {
    position: relative;
    display: inline-block;
    background: #D0EEFF！;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.Mfile input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.Mfile:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

#thelist{
	position: relative;
	float: left;
	width: 100%;
	height: 250px;
}

video{
	position: relative;
	width: 100%;
	height: 100%;
}
#uploader{
	    text-align: center;
}

</style>
	<body>
	
					
					
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">发布上传</h1>
		</header>
		
		
		<div class="mui-content">
			
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
  <div class="layui-progress-bar" lay-percent="0%"></div>
</div>
			

				<div id="uploader" class="wu-example">
					<!--用来存放文件信息-->
					<div id="thelist" style="display:none ;">
					     上传完成
					</div>
				    <div class="btns Mfile">
						<input type="file" name='file'>上传视频
						<input type="hidden" name="videos" value=""/>
							<!-- <div id="picker" >选择视频</div> -->
							<!-- 	 <button id="ctlBtn" class="btn btn-default">开始上传</button> -->
					</div>
				</div>
			</div>


			<div class="hang"></div>
			<!-- 选择视频分类 -->
			<div class="fenlei">
				<div>视频分类</div>
				<select class="mui-btn mui-btn-block" id="fenlei">
					<option value="" style="display: none;">请选择视频分类></option>
					<!-- <option value="item-1">艺术类型</option>
					<option value="item-2">才艺展示</option>
					<option value="item-3">小品相声</option>
					<option value="item-4">歌声嘹亮</option>
					<option value="item-5">其他类型</option> -->
				</select>
			</div>
			<div class="hang"></div>
			<!-- 添加视频名称 -->
			<input class="shipinname" name="name" type="text" placeholder="请添加视频名称" />
			<textarea id="textarea" name="dir" rows="5" placeholder="请简要描述你的短视频"></textarea>
			<div class="tupian">
				<img id="shangchuan" class="shangchuan" src="../image/shipinfengmian.png" />
			</div>
			<input type="hidden" name='covers' value="" />
			<div class="huqueren"> <button type="button" class="mui-btnss">确认</button></div>
		</div>
		</div>
		
		
	</body>
	<script src="../js/jquery-2.1.4.min.js"></script>
	<script src="../js/webuploader.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script src="../js/layui.all.js" ></script>
	<script src="../maowenke/ChaJian.js"></script>
	<script>
		mui.plusReady(function() {
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			user = JSON.parse(user);
			var element = '';
			layui.use('element', function(){
					  element = layui.element;
				});
			mui.post(url+'/juyou/myfile/getclassification',{token:user.token},function(res){
				if(res.code==200){
					var str = '';
					mui.each(res.data.classes,function(i,v){
						str+='<option value="'+v.id+'">'+v.name+'</option>';
					})
					$("#fenlei").append(str)
				}else{
					mui.toast(res.msg);
				}
			})
	
			   // 上传动画
				$("[name=file]").click(function() {
					setTimeout(function(){
                    $("#vid").css("opacity","1");
                    },6000)
                    })
					
			$("[name=file]").change(function() {
				plus.nativeUI.showWaiting();
				ChaJian.fenpianFile($(this), url + '/juyou/myfile/fenpianfile', function(quanbu) {
					// console.log(quanbu)
				}, function(yige) {    // 上传一个文件的 结果回调
                $("[name=videos]").val(yige.id);
				var ssd='100%'
                  element.progress('demo',ssd);
				}, function(yipian) {   //上传一个文件 一片的回调
				plus.nativeUI.closeWaiting();
		      	var ssd=0;	
				var ss=parseInt((yipian.index/yipian.number)*100);
				if(ss==100){
					ssd=99+"%"
				}else{
					ssd=ss+"%"
				}
				  element.progress('demo',ssd);
			
				})
			})
			
			
//  function  yisi(index,number){
// 	 pingjun = Math.round((1/number)*100) ;//平均进度
// 	 if(index==1){
// 		  dataperc=  0;
// 	 }else{
// 		 dataperc=  index*pingjun
// 	 }
// 	 size =10*1024;
//      time=(Math.round(size / 300)) *1000;
// 	$('.progressbar').each(function(){
// 		var t = $(this),
// 		barperc = Math.round(dataperc*2.8);   
// 		t.find('.bar').animate({width:barperc}, time);   // 设置总的时间
// 		t.find('.label').html('<div class="perc"></div>');
// 		
// 		function perc(){
// 			var length = t.find('.bar').css('width'),
// 			perc = Math.round(parseInt(length)/2.8),
// 			labelpos = (parseInt(length)-2);
// 			t.find('.label').css('left', labelpos);
// 			t.find('.perc').text(perc+'%');
// 		   if(perc==dataperc){
// 		   clearInterval(dingshi);    
// 		   }
// 		}
// 		perc();
// var  dingshi=setInterval(perc, 0); 
//   
// 	});
// 
// 	
// 	}
			
			
			mui('.huqueren').on('tap','button',function(){
				var videos = $("[name=videos]").val();
				if(!videos){
					mui.toast('请上传视频文件!!');
					return;
				}
				var name = $("[name=name]").val();
				if(!name){
					mui.toast('请输入视频名称!!');
					return;
				}
				var dir = $("[name=dir]").val();
				if(!dir){
					mui.toast('请输入视频描述!!');
					return;
				}
				var covers = $("[name=covers]").val();
				// mui.alert(covers);
				if(!covers){
					mui.toast('请上传视频封面!!');
					return;
				}
				var fenlei = $("#fenlei").val();
				if(!fenlei){
					mui.toast('请选择视频分类!!');
					return;
				}
				plus.nativeUI.showWaiting();
				mui.post(url+'/juyou/myfile/addshipin',{token:user.token,name:name,dir:dir,covers:covers,fenlei:fenlei,videos:videos},function(res){
					plus.nativeUI.closeWaiting();
					// mui.toast(res.msg);
					if(res.code==200){
						mui.toast('上传成功!,请等待定价上架!');
						setTimeout(function(){
							mui.back();
						},1500);
					}else{
						mui.toast(res.msg);
					}
				})
			})
			
			
			
		              	//选择视频展示图
			              document.getElementById('shangchuan').addEventListener('tap', function() {
												if (mui.os.plus) {
													var a = [{
														title: "拍照"
													}, {
														title: "从手机相册选择"
													}];
													plus.nativeUI.actionSheet({
														title: "视频封面上传",
														cancel: "取消",
														buttons: a
													}, function(b) { /*actionSheet 按钮点击事件*/
														switch (b.index) {
															case 0:
																break;
															case 1:
																getImages(); /*拍照*/
																break;
															case 2:
																galleryImages(); /*打开相册*/
																break;
															default:
																break;
														}
													})
												}
											}, false);
					
					
					
							   //拍照
			  function getImages(){
			      var mobileCamera=plus.camera.getCamera();
			      mobileCamera.captureImage(function(e){
			          plus.io.resolveLocalFileSystemURL(e,function(entry){
			              var path=entry.toLocalURL()+'?version='+new Date().getTime();
									 shangchuantouxiang(path,function(data){
										  // $("[name=covers]").val(data.id)
										  // mui.alert(data.path)
										  // mui.alert(data.id);
										  $("[name=covers]").val(data.id)
										 $("#shangchuan").attr("src",data.path)
										  // 上传后的回调
									 })
			              // uploadHeadImg(path);
			          },function(err){
			              console.log("读取拍照文件错误");
			          });
			      },function(e){
			          console.log("er",err);
			      },function(){
			          filename:'_doc/head.png';
			      });
			  }
					
						   //从本地相册选择
			  function galleryImages(){
			      console.log("你选择了从相册选择");
			      plus.gallery.pick(function(a){
			          plus.io.resolveLocalFileSystemURL(a,function(entry){
			              plus.io.resolveLocalFileSystemURL('_doc/',function(root){
			                  root.getFile('head.png',{},function(file){
			                      //文件已经存在
			                      file.remove(function(){
			                          console.log("文件移除成功");
			                          entry.copyTo(root,'head.png',function(e){
			                              var path=e.fullPath+'?version='+new Date().getTime();
												     shangchuantouxiang(path,function(data){
														 console.log(data.id)
														 // mui.alert(data.id);
														 $("[name=covers]").val(data.id)
														 	 $("#shangchuan").attr("src",data.path)
															 
														  // 相册上传后的回调data
													 }) 
														 
													// uploadHeadImg(path);
			                          },function(err){
			                              console.log("copy image fail: ",err);
			                          });
			                      },function(err){
			                          console.log("删除图片失败：（"+JSON.stringify(err)+")");
			                      });
			                  },function(err){
			                      //打开文件失败
			                      entry.copyTo(root,'head.png',function(e){
			                          var path=e.fullPath+'?version='+new Date().getTime();
			                          uploadHeadImg(path);
			                      },function(err){
			                          console.log("上传图片失败：（"+JSON.stringify(err)+")");
			                      });
			                  });
			              },function(e){
			                  console.log("读取文件夹失败：（"+JSON.stringify(err)+")");
			              });
			          });
			      },function(err){
			          console.log("读取拍照文件失败: ",err);
			      },{
			          filter:'image'
			      });
			  };
					
					
			 // 上传视频封面图方法
			function  shangchuantouxiang(path,func){
						  plus.nativeUI.showWaiting();
						  var  image =new  Image();
						  image.src=path;
						  image.onload=function(){
							  	var imgData=getBase64Image(image); 
								  	mui.ajax(url+'/juyou/index/upimgs',{
								data:{
									file:imgData
								},
								dataType:'json',//服务器返回json格式数据
								type:'post',//HTTP请求类型
								timeout:10000,//超时时间设置为10秒；
								success:function(data){
									// mui.alert("头像上传成功")
										plus.nativeUI.closeWaiting()
										if(func){
											func(data)
										}
								},
								error:function(data){
									mui.alert("头像上传失败")
								}
							});  
						  }
						  
					
			}
					
					
					
										  //压缩图片转成base64
			  function getBase64Image(img){
							// console.log(img.getBase64Image());
			      var canvas=document.createElement("canvas");
			      var width=img.width;
			      var height=img.height;
				  var size = img.size;
							
			      if(width>height){
			          if(width>500){
			              height=Math.round(height*=500/width);
			              width=500;
			          }
			      }else{
			          if(height>500){
			              width=Math.round(width*=500/height);
			          }
			          height=500;
			      }
					
			      canvas.width=width;
			      canvas.height=height;
			      var ctx=canvas.getContext('2d');
			      ctx.drawImage(img,0,0,width,height);
					
			      var dataUrl=canvas.toDataURL('image/png',0.8);
			      return dataUrl.replace('data:image/png:base64,','');
			  }
		})

	</script>
</html>
